<template>
  <view class="ui-page ui-page__scroll">
    <uiCellGroup title="基础用法">
      <uiCell title="显示弹出层" clickable @click="handleClickItem('center')"></uiCell>
    </uiCellGroup>
    <uiCellGroup title="弹出位置">
      <uiCell title="顶部弹出" clickable @click="handleClickItem('top')"></uiCell>
      <uiCell title="底部弹出" clickable @click="handleClickItem('bottom')"></uiCell>
      <uiCell title="左侧弹出" clickable @click="handleClickItem('left')"></uiCell>
      <uiCell title="右侧弹出" clickable @click="handleClickItem('right')"></uiCell>
    </uiCellGroup>
    <uiCellGroup title="关闭图标">
      <uiCell title="关闭图标" clickable @click="handleClickItem('bottom' , false , true)"></uiCell>
      <uiCell title="自定义图标" clickable @click="handleClickItem('bottom' , false , true)"></uiCell>
      <uiCell title="图标位置" clickable @click="handleClickItem('bottom' , false , true)"></uiCell>
    </uiCellGroup>
    <uiCellGroup title="圆角弹窗">
      <uiCell title="圆角弹窗" clickable @click="handleClickItem('center' , true)"></uiCell>
    </uiCellGroup>
    <uiDialog :position="position" :closeable="closeable" :round="round" :show="isShow">弹出框</uiDialog>
  </view>
</template>

<script>
import uiCell from "@/components/base/cell/index.vue";
import uiCellGroup from "@/components/base/cell-group/index.vue";

import uiDialog from "components/base/dialog/index";
export default {
  name: "demoPriceComponentPage",
  components: {
    uiCellGroup,
    uiCell,
    uiDialog
  },
  data() {
    return {
      position: "center",
      isShow: false,
      round: false,
      closeable: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClickItem(position, round, closeable) {
      console.log("click");
      this.position = position;
      this.round = !!round;
      this.closeable = !!closeable;
      this.isShow = true;
    }
  }
};
</script>

<style scoped lang="scss"></style>
